<template>
  <div class="header-container">
    <div class="header-title" :style="titleCss">
      <img
        v-if="!pureText"
        :src="titleBg"
        :title="logoTitle"
        :style="titleCss"
      />
      <h2 v-else>{{ pureText }}</h2>
    </div>
    <div class="header-setting">
      <slot name="default">
        <el-button type="primary" @click="logout">退出</el-button>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "HeaderIndex",
  components: {},
})
export default class HeaderIndex extends Vue {
  //系统logo标题背景图片
  @Prop() titleBg!: String;
  //系统logo标题图片名称
  @Prop({ default: "后台系统" }) logoTitle!: String;
  //系统标题logo图片名称
  @Prop({
    default: {
      width: "300px",
      height: "100px",
    },
  })
  titleCss!: String | Boolean;
  //系统标题纯文字表达，当存在时不显示文字
  @Prop() pureText!: String;

  //退出登录
  @Emit("logout") //@Emit()//省略参数将使用回调函数名，转化为中划线@add-data
  logout() {}
}
</script>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  padding: 10px 20px;
  background-color: #fff;
  .header-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header-setting {
    display: flex;
    align-items: center;
  }
}
</style>
